<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 400rpx;
	}

	.search {
		border: 1px solid #ccc;
		height: 60rpx;
		margin: 10rpx 10rpx;
	}
</style>

<template>
	<view class="">
		<input type="text" class="search" placeholder="请输入地点" @click="selectAddress" />
		<map :markers="covers" v-if="longitude" name="" class="map" :longitude="longitude" :latitude="latitude"></map>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue'
	const longitude = ref(0)
	const latitude = ref(0)
	const covers = ref([{
		latitude: 39.908823,
		longitude: 116.39747,
		iconPath: 'https://preview.qiantucdn.com/58pic/20220301/00858PICTnTQdFrzd553X_PIC2018_PIC2018.jpg%21qt324_nowater_jpg'
	}])
	const selectAddress = () => {
		uni.chooseLocation({
			success: resp => {
				console.log('位置：', resp)
				longitude.value = resp.longitude
				latitude.value = resp.latitude
				covers.value = [{
					longitude,
					latitude,
					iconPath: 'https://preview.qiantucdn.com/58pic/20220301/00858PICTnTQdFrzd553X_PIC2018_PIC2018.jpg%21qt324_nowater_jpg'
				}]
			},
			fail: error => {
				console.log('地址选择失败')
			}
		})
	}
	// 获取用户的定位： 其实就是获取经纬度

	const getLocation = () => {
		uni.getLocation({
			success: resp => {
				console.log(resp)
				longitude.value = resp.longitude
				latitude.value = resp.latitude
			},
			fail: error => {
				console.log('位置经纬度获取失败', error)
			}
		})

	}
	getLocation()
</script>